<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 
            上传组件
            van-uploader
            v-model="[{url:图片地址}]" //已上传的图片 回显已上传的图片
            max-count:上传的个数
            before-read:文件读取前
                function(file){
                    file.type:文件类型
                    file.size:文件大小
                    return boolean值
                    true:正常上传
                    false:中止上传
                }



         -->

        <van-uploader v-model="fileList" :max-count="2" :before-read="beforeRead" :after-read="afterRead">

        </van-uploader>

    </div>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.10/lib/index.css" />


    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.10/lib/vant.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                fileList: [],
            },
            methods: {
                beforeRead(file) {
                    const isPng = file.type === "image/png";
                    const limit2M = file.size / 1024 / 1024 < 2;
                    if (!isPng) {
                        this.$toast.fail('请上传png格式图片');

                    }
                    if (!limit2M) {
                        this.$toast.fail('请上2M内的文件');
                    }
                    return isPng && limit2M
                },
                afterRead(file) {
                    window.console.log(file);
                    let _formData = new FormData();
                    _formData.append("files", file.file);
                    axios({
                        url: 'http://localhost:1337/upload',
                        headers: {
                            authorization: `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6OCwiaWF0IjoxNjAyNTUwMjg4LCJleHAiOjE2MDUxNDIyODh9.sS4sfJBSj2w0Tjn9weIwCdgfkDOHj6j_jSLkBlnESr4`
                        },
                        method: "post",
                        data: _formData,
                    }).then(res => {
                        //成功回调
                        console.log(res)
                    });
                }
            },
        });
    </script>
</body>

</html>